import './ExcelData.scss'
import { App, Button } from 'antd'
import { useRef, useState } from 'react'
import { useMount } from 'ahooks';
import { useRequest } from 'alova/client';
import { Http } from '../../Utils/Api';

import { strOfurlParamsFunc } from '../../Utils'
import { DownloadOutlined, SaveOutlined } from '@ant-design/icons';


const { GC, ttxVideoAll, location } = window
GC.Spread.Common.CultureManager.culture('zh-cn')

const ExcelData = ({ config, data, search, DateEvent }) => {
    const { notification } = App.useApp()


    const ExcelBox = useRef()
    const WorkBox = useRef()
    const [spread, setSpread] = useState()
    const [ExcelName, setExcelName] = useState()
    const [loading, setLoading] = useState(false)
    const { getMethod, getUrl, getParams, saveMethod, saveUrl, saveParams, isMaster,
        masterField, masterMapping, saveMaster, saveField, saveMapping, ORGUUID
    } = config



    const { send } = useRequest(data => Http(data), { immediate: false })

    useMount(() => {
        const params = { ...strOfurlParamsFunc(getParams), ...search, OrganizationUuid: ORGUUID }
        if (isMaster) params[masterMapping] = data[masterField]
        const spread = new GC.Spread.Sheets.Workbook(WorkBox.current, { sheetCount: 1 })
        setSpread(spread)
        send({ method: getMethod, url: getUrl, params }).then(res => {
            const { blob, filename } = res
            setExcelName(filename)
            const excelIo = new GC.Spread.Excel.IO()
            excelIo.open(blob, workbookObj => spread.fromJSON(workbookObj))
        })
        new GC.Spread.Sheets.Designer.Designer(ExcelBox.current, '', spread)
    })

    const saveExcel = () => {
        const excelIo = new GC.Spread.Excel.IO()
        excelIo.save(spread.toJSON(), e => saveAs(e, ExcelName))
    }

    const submitExcel = () => {
        // setLoading(true)
        const excelIo = new GC.Spread.Excel.IO()
        excelIo.save(spread.toJSON(), e => {
            const forms = new FormData()
            const { type } = e
            const file = new File([e], ExcelName, { type })
            forms.append('File', file)
            forms.append('FileType', 3)
            if (saveMaster) forms.append(saveMapping, data[saveField])
            send({ method: saveMethod, url: saveUrl, params: forms }).then(res => {
                if (res?.code) {
                    notification.success({ key: 'fromModify', message: '保存成功', description: res.message })
                    DateEvent.emit({ type: 'onRefresh' })
                } else {
                    const { blob, filename, response } = res
                    const excelIo = new GC.Spread.Excel.IO()
                    excelIo.open(blob, workbookObj => spread.fromJSON(workbookObj))
                    new GC.Spread.Sheets.Designer.Designer(ExcelBox.current, '', spread)
                    const text = decodeURIComponent(response.headers.get('message'))
                    notification.warning({ key: 'fromModify', message: '保存失败', description: text })
                }
            })
        })
    }
    return (
        <div className='ExcelTemp'>
            <div className="Excel" ref={ExcelBox} />
            <div className="Work" ref={WorkBox} />
            <div className='Options'>
                <Button icon={<DownloadOutlined />} onClick={saveExcel}>下载Excel</Button>
                {saveMethod && saveUrl && <Button loading={loading} type="primary" icon={<SaveOutlined />} onClick={submitExcel}>
                    保存信息
                </Button>}
            </div>
        </div>
    );
};

export default ExcelData;